---
import HeadCommon from '../components/HeadCommon.astro';
import HeadSEO from '../components/HeadSEO.astro';
import Header from '../components/Header/Header.astro';
import Footer from '../components/Footer/Footer.astro';
import PageContent from '../components/PageContent/PageContent.astro';
import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro';
import RightSidebar from '../components/RightSidebar/RightSidebar.astro';
import * as CONFIG from '../config';

const { content = {} } = Astro.props;
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
const currentPage = Astro.url.pathname;
const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.md`;
const githubEditUrl = CONFIG.GITHUB_EDIT_URL && CONFIG.GITHUB_EDIT_URL + currentFile;
---

<html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
	<head>
		<HeadCommon />
		<HeadSEO {content} canonicalURL={canonicalURL} />
		<title>{content.title ? `${content.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}</title>
		<style>
			body {
				width: 100%;
				display: grid;
				grid-template-rows: var(--theme-navbar-height) 1fr;
				--gutter: 0.5rem;
				--doc-padding: 2rem;
			}
			.layout {
				display: grid;
				grid-auto-flow: column;
				grid-template-columns:
					minmax(var(--gutter), 1fr)
					minmax(0, var(--max-width))
					minmax(var(--gutter), 1fr);
				overflow-x: hidden;
			}
			.layout :global(> *) {
				width: 100%;
				height: 100%;
			}
			.grid-sidebar {
				height: 100vh;
				position: sticky;
				top: 0;
				padding: 0;
			}
			#grid-left {
				position: fixed;
				background-color: var(--theme-bg);
				z-index: 10;
				display: none;
			}
			#grid-main {
				padding: var(--doc-padding) var(--gutter);
				grid-column: 2;
				display: flex;
				flex-direction: column;
				height: 100%;
			}
			#grid-right {
				display: none;
			}
			:global(.mobile-sidebar-toggle) {
				overflow: hidden;
			}
			:global(.mobile-sidebar-toggle) #grid-left {
				display: block;
				top: 2rem;
			}
			@media (min-width: 50em) {
				.layout {
					overflow: initial;
					grid-template-columns:
						20rem
						minmax(0, var(--max-width));
					gap: 1em;
				}
				#grid-left {
					display: flex;
					padding-left: 2rem;
					position: sticky;
					grid-column: 1;
				}
			}

			@media (min-width: 72em) {
				.layout {
					grid-template-columns:
						20rem
						minmax(0, var(--max-width))
						18rem;
					padding-left: 0;
					padding-right: 0;
					margin: 0 auto;
				}
				#grid-right {
					grid-column: 3;
					display: flex;
				}
			}
		</style>
	</head>

	<body>
		<Header {currentPage} />
		<main class="layout">
			<aside id="grid-left" class="grid-sidebar" title="Site Navigation">
				<LeftSidebar {currentPage} />
			</aside>
			<div id="grid-main">
				<PageContent {content} {githubEditUrl}>
					<slot />
				</PageContent>
			</div>
			<aside id="grid-right" class="grid-sidebar" title="Table of Contents">
				<RightSidebar {content} {githubEditUrl} />
			</aside>
		</main>
	</body>
</html>
